<!--
see: http://leafletjs.com/examples/quick-start-example.html
-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../leaflet-0.7.3/leaflet.css"/>

    <title>ATLMap demo</title>
</head>
<body>
    <div id="map" style="width: 800px; height: 600px"></div>
    <script src="../leaflet-0.7.3/leaflet.js"></script>
    <script>

        var map = L.map('map').setView([-26.09,28.17], 13);

        L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
            id: 'examples.map-i86knfo3'
        }).addTo(map);

        L.marker([-26.09,28.17]).addTo(map)
                .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

        L.circle([-26.05, 28.15], 1500, {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5
        }).addTo(map).bindPopup("I am a circle.");

        L.polygon([
            [-26.10, 28.18],
            [-26.10, 28.188],
            [-26.095, 28.178]
        ]).addTo(map).bindPopup("I am a polygon.");

        var popup = L.popup();

        function onMapClick(e) {
            popup
                    .setLatLng(e.latlng)
                    .setContent("You clicked the map at " + e.latlng.toString())
                    .openOn(map);
        }

        map.on('click', onMapClick);

    </script>

</body>
</html>